<template>
    <div class="bg-white round-borders relative-position"  :class="{'q-pa-md shadow-light': $q.screen.gt.md}">
      <a-notifications :notifications="querySet" sparse style="min-height: 160px">
      </a-notifications>
      <div class="relative-position">
        <a-loading :visible="loading" height="50px"></a-loading>
      </div>
    </div>
</template>

<script>
  import { querySetMixin } from '../../mixins'

  export default {
    name: 'pageNotifications',
    mixins: [querySetMixin],
    props: {
      type: {
        type: String,
        required: false,
        default: 'all'
      }
    },
    data () {
      return {
        api: '/api/user/notification_list/',
        limit: 20,
        infinite: true
      }
    },
    watch: {
      querySet () {
        this.$root.$emit('updateUnreadCount')
      }
    },
    computed: {
      queryParams () {
        if (this.type !== 'all') {
          return {
            type: this.type
          }
        } else {
          return null
        }
      }
    }
  }
</script>

<style lang="stylus">

</style>
